<template>
	<div>
		<!-- 客服页 -->
		<!-- 头部 -->
		<div id="header">
			<img @click="$router.history.go(-1)" src="@/assets/img/icon/backup.png">
			<div>在线客服</div>
		</div>
		<!-- 主体部分 -->	
			<div id="mainer">
				<!-- 一条消息 -->
				<div v-show="kefu.length" class="info" v-for="item,i in kefu" :key="i">
					<div class="avatar">
						<img :src="`/${item.avatar}`">
					</div>
					<div>
						<div class="nickname">{{item.username}}</div>
						<div class="message">{{item.info}}</div>
					</div> 
				</div>
			</div>
		<!-- 发送部分 -->
		<div id="footer">
			<input type="text" @keyup.enter="sendmsg" v-model="info" placeholder="请输入您要发送的内容">
			<div @click="sendmsg">发送</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				socket: null,
				info:'',
				sname:this.$route.query.sname,
				avatar:this.$route.query.avatar,
				kefu:[] //接收客服的消息
			}
		},
		methods:{
			// 向服务端发送消息
			sendmsg(){
				// 输入框的值不能是空
				if(this.info=='') return 
				if(this.socket){
					this.socket.emit('kefu',{username:this.sname,avatar:this.avatar,info:this.info})
					this.info='' //清空输入框的值
				}
			}
		},
		mounted(){
			this.socket=io('http://114.116.79.58:6002/')
			// 接收到服务端的消息
			this.socket.on('kefu',info=>{
				this.kefu.push(info)
			})
		},
		destroyed(){
			// 断开连接
			this.socket=null
		}
	}
</script>

<style lang="scss" scoped>
#header {
	display: flex;
	justify-content: center;
	padding: 0.615em 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	background-color: #fff;
	border-bottom: 1px solid #efeef3;
	>img {
		position: absolute;
		top: 0.515em;
		left: 0.615em;
		width: 1.2em;
	}
}
#mainer {
	margin-top: 2.4em;
	margin-bottom: 2.19em;
	.info {
		padding: 0.315em;
		display: flex;
		align-content: center;
		// 头像
		.avatar {
			width: 2.13em;
			height: 2.13em;
			img {
				border-radius: 50%;
				max-width: 100%;
			}
			margin-right: 0.315em;
			border-radius: 50%;
		}
		>div {
			&:nth-child(2){
				font-size: .9em;
				.nickname {
					padding-bottom: 0.315em;
				}
				.message {
					padding: 0.315em;
				}
			}
		}
	}
}
#footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	border-top: 1px solid #efeef3;
	font-size: .9em;
	>input {
		flex: 1;
		padding: 0.615em;
		outline: none;
		border: none;
	}
	>div {
		// 发送按钮
		&:nth-child(2){

			background-color: #efeef3;
			padding: 0.715em;
			color: #333;
		}
	}
}
</style>